<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Предметы</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/schedule/schedule.css" />
    <script src="/displayBalance.js" type="module"></script>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
      (function (m, e, t, r, i, k, a) {
        m[i] =
          m[i] ||
          function () {
            (m[i].a = m[i].a || []).push(arguments);
          };
        m[i].l = 1 * new Date();
        for (var j = 0; j < document.scripts.length; j++) {
          if (document.scripts[j].src === r) {
            return;
          }
        }
        (k = e.createElement(t)),
          (a = e.getElementsByTagName(t)[0]),
          (k.async = 1),
          (k.src = r),
          a.parentNode.insertBefore(k, a);
      })(
        window,
        document,
        "script",
        "https://mc.yandex.ru/metrika/tag.js",
        "ym"
      );

      ym(97272843, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
      });
    </script>
    <noscript
      ><div>
        <img
          src="https://mc.yandex.ru/watch/97272843"
          style="position: absolute; left: -9999px"
          alt=""
        /></div
    ></noscript>
    <!-- /Yandex.Metrika counter -->
  </head>
  <body>
    <div class="navbar">
      <a class="tab" id="home" href="/">
        <img src="/image/house.svg" alt="house"/>
        <label for="home">Главная</label>
      </a>
      <a class="tab mButton" id="pay" href="/pay/">
        <img src="/image/wallet2.svg" alt="wallet"/>
        <label for="pay">Баланс</label>
      </a>
      <a class="tab mButton" id="schedule">
        <img src="/image/calendar-week-1.svg" alt="calendar"/>
        <label for="schedule">Расписание</label>
      </a>
      <a class="tab" id="item" href="/items/"
        ><img src="/image/mortarboard.svg" alt="mort"/>
        <label for="item">Предметы</label>
      </a>
      <a class="tab" id="another" href="/another/"
        ><img src="/image/three-dots.svg" alt="dots"/>
        <label for="another">Еще</label>
      </a>
    </div>
    <div class="header">
      <div class="header2">
        <div class="circle">
          <p class="circleName"></p>
        </div>
        <div class="nameHeader">
          <span id="displayName"></span>
          <img src="/image/chevron-right.svg" />
        </div>
      </div>
      <div class="balanceHeader">
        <div style="display: flex; align-items: center">
          <p id="headerRub">0</p>
          <p>₽</p>
        </div>
        <div style="display: flex; align-items: center">
          <p id="headerEuro">0</p>
          <p>€</p>
        </div>
      </div>
    </div>
    <div class="main">
      <h1>Расписание</h1>
      <div class="radio-input">
        <label>
          <input
            value="value-1"
            name="value-radio"
            id="value-1"
            type="radio"
            checked="true"
          />
          <p>Предстоящие</p>
        </label>
        <label>
          <input value="value-2" name="value-radio" id="value-2" type="radio" />
          <p>Прошедшие</p>
        </label>
        <span class="selection"></span>
      </div>
      <!-- <a
        href="http://www.google.com/calendar/event?action=TEMPLATE&text=Read%20thesolutionsarchitect.net%20Announcement&dates=20120820T130000Z/20120820T133000Z&details=&location=www.thesolutionsarchitect.net&trp=true&sprop=&sprop=name:thesolutionsarchitect.net"
        target="_blank"
        rel="nofollow"
        >Add to my calendar</a
      > -->
      <div id="innerNextLesson"></div>
      <div id="innerPrevLesson" class="classHide"></div>
      <button class="loadMoreNext classHide">Показать еще</button>
      <button class="loadMorePrev classHide">Показать еще</button>
      <div style="margin-bottom: 40px"></div>
    </div>
    <div class="referrer" id="moveLesson">
      <form class="bPopupContent" id="moveLessonForm">
        <div class="flex">
          <img src="/image/Union.svg" alt="close" id="closeMoveLessonBtn" />
        </div>
        <h1>Перенести занятие</h1>
        <h1 id="hLessonName"></h1>
        <input
          class="pa__middle-input"
          type="date"
          name="date"
          placeholder="Желаемая дата"
          onchange="this.className=(this.value!=''?'has-value':'')"
          required
        />
        <input type="text" placeholder="Комментарий" name="comment" />
        <button type="submit" id="sendFormBtn">Оставить заявку</button>
      </form>
    </div>
    <div id="firstReferrer" class="referrer">
      <div class="bPopupContent">
        <div class="flex">
          <img src="/image/Union.svg" alt="close" id="closeCalendarButton" />
        </div>
        <div class="calendarField" id="googleButton">
          <img src="/image/Google_Calendar_icon_(2020) 1.svg" alt="google" />
          <h3>Google Календарь</h3>
        </div>
        <div class="calendarField" id="yandexButton">
          <img src="/image/yandex_icon.svg" alt="yandex" />
          <h3>Яндекс Календарь</h3>
        </div>
      </div>
    </div>
    <div id="referrer" class="referrer">
      <div class="bPopupContent classHide" id="secondModal">
        <div class="flex">
          <img
            src="/image/Union.svg"
            alt="close"
            class="btn-close"
            id="closeBtn1"
          />
        </div>
        <h1>Отменить занятие?</h1>
        <p id="payFullCancel">Отмена</p>
        <button class="nextModalButton">Да, отменить занятие</button>
        <button class="close">Не отменять</button>
      </div>
      <div class="bPopupContent classHide" id="thirdModal">
        <div class="flex">
          <img
            src="/image/Union.svg"
            alt="close"
            class="btn-close"
            id="closeBtn2"
          />
        </div>
        <div class="ellipse">
          <img src="/image/check2.svg" />
        </div>
        <h1 id="innerAnotherDate"></h1>
        <button id="cancelLesson">Отлично</button>
      </div>
    </div>
    <div class="alertPopUp">
      <!-- <div class="windowPopContent">
        <p>Сообщение отправленно</p>
      </div> -->
    </div>

    <div id="lateLessonReferrer" class="referrer">
      <div class="bPopupContent">
        <div class="flex">
          <img src="/image/Union.svg" alt="close" id="closeLateLesson" />
        </div>
        <h1 style="margin-bottom: 10px">Вы действительно опаздываете?</h1>
        <button id="sendLateMess">Да опаздываю</button>
        <button id="closeLatePop">Нет</button>
      </div>
    </div>

    <div id="secondReferrer" class="referrer">
      <div class="bPopupContent">
        <div class="flex">
          <img
            src="/image/Union.svg"
            alt="close"
            id="closeReportTeacherButton"
          />
        </div>
        <p id="reportFromTeacher"></p>
      </div>
    </div>
    <div class="reportAboutLesson classHide">
      <div class="aboutHeader">
        <p>Занятие с CareMyBaby</p>
        <h1 id="reportAboutData"></h1>
        <div class="reportButton">
          <img src="/image/file-text.svg" />
          <p id="showTeacherReport" class="link">Отчет о занятии</p>
        </div>
      </div>

      <div class="inlineAbout">
        <div class="aboutFlex">
          <p>Длительность</p>
          <p class="selfInput" id="reportAboutDuration"></p>
        </div>
        <div class="aboutFlex">
          <p>Стоимость</p>
          <p class="selfInput" id="reportAboutCost"></p>
        </div>
      </div>

      <div class="aboutFlex">
        <p>Направление</p>
        <p class="selfInput" id="reportAboutLessonName"></p>
      </div>
      <div class="aboutFlex">
        <p>Педагог</p>
        <p class="selfInput" id="reportAboutTeacher"></p>
      </div>
      <!-- <div class="linkToTeacher">
        <p>Связаться с педагогом</p>
        <img src="/image/chat-dots.svg" />
      </div> -->
      <p id="feadBackContainer">Как прошел урок?</p>
      <h2 class="thanks classHide">Спасибо за ваш отзыв!</h2>
      <form id="feadbackForm" class="classHide">
        <div class="rating">
          <input
            type="radio"
            id="star5"
            name="rate"
            value="5"
            class="allInput"
          />
          <label for="star5" title="text" class="allRadio"></label>
          <input
            type="radio"
            id="star4"
            name="rate"
            value="4"
            class="allInput"
          />
          <label for="star4" title="text" class="allRadio"></label>
          <input
            type="radio"
            id="star3"
            name="rate"
            value="3"
            class="allInput"
          />
          <label for="star3" title="text" class="allRadio"></label>
          <input
            type="radio"
            id="star2"
            name="rate"
            value="2"
            class="allInput"
          />
          <label for="star2" title="text" class="allRadio"></label>
          <input
            type="radio"
            id="star1"
            name="rate"
            value="1"
            class="allInput"
          />
          <label for="star1" title="text" class="allRadio"></label>
        </div>

        <div class="favor classHide">
          <p>Что понравилось больше всего?</p>
          <div class="slideBar">
            <div class="icon">
              <input
                type="checkbox"
                class="favIcon"
                name="atmosfera"
                value="true"
                id="checkbox1"
              />
              <label for="checkbox2" class="tooltip"></label>
              <label class="tooltip" for="checkbox1">Атмосфера на уроке</label>
            </div>
            <div class="icon">
              <input
                type="checkbox"
                class="favIcon"
                name="pedagog"
                value="true"
                id="checkbox2"
              />
              <label for="checkbox2" class="tooltip"></label>
              <label class="tooltip" for="checkbox2">Яркий педагог</label>
            </div>
            <div class="icon">
              <input
                type="checkbox"
                class="favIcon"
                name="theme"
                value="true"
                id="checkbox3"
              />
              <label for="checkbox3" class="tooltip"></label>
              <label class="tooltip" for="checkbox3">Интересная тема</label>
            </div>
            <div class="icon">
              <input
                type="checkbox"
                class="favIcon"
                name="happy"
                value="true"
                id="checkbox4"
              />
              <label for="checkbox4" class="tooltip"></label>
              <label class="tooltip" for="checkbox4">Счастливый ребёнок</label>
            </div>
          </div>
        </div>

        <!-- <input> -->
        <div id="textArea" class="classHide">
          <textarea
            form="feadbackForm"
            id="textFeadBack"
            required
            placeholder="Расскажите как все прошло"
            name="feadback"
          ></textarea>
          <!-- </input> -->
          <!-- <button type="submit" id="sendFeadBackButton">Готово</button> -->
        </div>
        <button type="submit" id="testingRemotse">Тест</button>
      </form>
      <!-- <button id="testingRemotse">Тест</button> -->
    </div>

    <script src="./script.js" type="module"></script>
  </body>
</html>
